<script lang="ts" setup>
import { onMounted } from 'vue';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Button, Popconfirm, Space, Tag } from 'ant-design-vue';

import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { deleteMenuApi, getMenuListApi } from '#/api/system/menu';
import { type MenuItem } from '#/api/system/models';

import MenuFormDrawer from './form-drawer.vue';

defineOptions({ name: 'SystemMenu' });

const gridOptions: VxeGridProps<MenuItem> = {
  columns: [
    { type: 'seq', width: 70 },
    {
      field: 'title',
      title: '菜单名称',
      width: 200,
      treeNode: true,
      align: 'left',
    },
    {
      field: 'icon',
      title: '图标',
      width: 60,
      slots: { default: 'icon' },
    },
    { field: 'path', title: '路由路径', width: 180 },
    { field: 'component', title: '组件路径', minWidth: 280 },
    { field: 'order', title: '排序', width: 60 },
    { field: 'status', title: '状态', width: 80, slots: { default: 'status' } },
    { field: 'createdTime', title: '创建时间', width: 160 },
    {
      field: 'action',
      title: '操作',
      fixed: 'right',
      width: 120,
      slots: { default: 'action' },
    },
  ],
  border: true,
  height: 'auto',
  rowConfig: {
    isHover: true,
    useKey: true,
  },
  treeConfig: {
    rowField: 'id',
    parentField: 'parentId',
    transform: true,
    expandAll: true,
    showLine: true,
  },
  pagerConfig: {
    enabled: false,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

const expandAll = () => {
  gridApi.grid?.setAllTreeExpand(true);
};

const collapseAll = () => {
  gridApi.grid?.setAllTreeExpand(false);
};

const [FormDrawer, formDrawerApi] = useVbenDrawer({
  connectedComponent: MenuFormDrawer,
});

function openFormDrawer(row?: MenuItem) {
  formDrawerApi.setData({ values: row });
  formDrawerApi.open();
}

async function loadData() {
  const items = await getMenuListApi();
  gridApi.grid.reloadData(items);
}

async function deleteHandle(row: MenuItem) {
  await deleteMenuApi(row.id);
  await loadData();
}

onMounted(async () => {
  await loadData();
});
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <Space>
          <Button type="primary" @click="openFormDrawer()"> 新增菜单 </Button>
          <Button type="primary" @click="expandAll"> 展开全部 </Button>
          <Button type="primary" @click="collapseAll"> 折叠全部 </Button>
        </Space>
      </template>
      <template #icon="{ row }">
        <IconifyIcon :icon="row.icon" />
      </template>
      <template #status="{ row }">
        <Tag :color="row.status === 1 ? 'green' : 'red'">
          {{ row.status === 1 ? '启用' : '停用' }}
        </Tag>
      </template>
      <template #action="{ row }">
        <Button size="small" type="link" @click="openFormDrawer(row)">
          编辑
        </Button>
        <Popconfirm title="确定要删除吗？" @confirm="deleteHandle(row)">
          <Button size="small" type="link"> 删除 </Button>
        </Popconfirm>
      </template>
    </Grid>
    <FormDrawer class="w-[720px]" @complete="loadData()" />
  </Page>
</template>
